<template>
  <div class="box_b">
    <div class="box-item box-item1">
      <div class="val a">
        <!-- {{ show.a }} -->
        <countTo :startVal="show.lastA" :endVal="show.a" :duration="3000"></countTo>
        <span class="unit">PC</span>
      </div>
      <div class="text">SMT</div>
    </div>
    <div class="box-item box-item2">
      <div class="val b">
        <!-- {{ show.b }} -->
        <countTo :startVal="show.lastB" :endVal="show.b" :duration="3000"></countTo>
        <span class="unit">台</span>
      </div>
      <div class="text">装配</div>
    </div>
    <div class="box-item box-item3">
      <div class="val c">
        <!-- {{ show.c }} -->
        <countTo :startVal="show.lastC" :endVal="show.c" :duration="3000"></countTo>
        <span class="unit">PC</span>
      </div>
      <div class="text">注塑</div>
    </div>
    <div class="box-item box-item4">
      <div class="val d">{{ show.d }}<span class="unit">台</span></div>
      <div class="text">自动化设备</div>
    </div>
  </div>
</template>

<script>
import CountTo from '@/utils/vue-count-to.min.js'
import dayjs from 'dayjs'
export default {
  name: 'BoxMidB',
  components: {
    CountTo
  },
  data() {
    return {
      show: {
        a: 0,
        lastA: 0,
        b: 0,
        lastB: 0,
        c: 0,
        lastC: 0,
        d: 5
      },
      mockData: {
        aTarget: 34151,
        bTarget: 2194,
        cTarget: 18000,
        aProduced: 0,
        bProduced: 0,
        cProduced: 0
      },
      timeInfo: {
        workHours: 9, // 每日工作时长
        startWorkHour: 8 // 开始工作的时间（小时），即：8点
      },
      intervalIns: null,
      secondIntervalIns: null
    }
  },
  mounted() {
    this.refreshData()
  },
  methods: {
    refreshData() {
      // this.intervalIns && clearInterval(this.intervalIns)
      this.secondIntervalIns && clearInterval(this.secondIntervalIns)
      this.getCurTimeData()
      // this.getShowData()
      // this.intervalIns = setInterval(this.getCurTimeData.bind(this), 1000 * 60) // 每1min刷新
      this.secondIntervalIns = setInterval(this.getShowData.bind(this), 1000 * 10) // 每10s刷新
    },
    getCurTimeData() {
      const hourNow = dayjs().hour()
      const minuteNow = dayjs().minute()
      // 已工作时长（分钟数）
      const workedMin = (+hourNow - this.timeInfo.startWorkHour) * 60 + minuteNow
      // 每分钟的产量值
      const getMinNum = targetVal => {
        const hourNum = targetVal / this.timeInfo.workHours
        const minNum = hourNum / 60
        return this.toFixed(minNum, 0)
      }
      const getTotalVal = perMinVal => this.toFixed(workedMin * perMinVal, 0)
      // SMT 已生产数值
      const aPerMinVal = getMinNum(this.mockData.aTarget)
      const aProduced = getTotalVal(aPerMinVal)
      const bProduced = getTotalVal(getMinNum(this.mockData.bTarget))
      const cProduced = getTotalVal(getMinNum(this.mockData.cTarget))
      this.$set(this.mockData, 'aProduced', aProduced)
      this.$set(this.mockData, 'bProduced', bProduced)
      this.$set(this.mockData, 'cProduced', cProduced)
      this.$set(this.show, 'a', aProduced)
      this.$set(this.show, 'b', bProduced)
      this.$set(this.show, 'c', cProduced)
      this.emitEvent()
    },
    getShowData() {
      const getRandom = (num = 50) => Math.floor(Math.random() * num)
      // const aShowData = this.toFixed(this.mockData.aProduced + getRandom(), 0)
      // const bShowData = this.toFixed(this.mockData.bProduced + getRandom(), 0)
      // const cShowData = this.toFixed(this.mockData.cProduced + getRandom(), 0)
      // this.$set(this.show, 'a', aShowData)
      // this.$set(this.show, 'b', bShowData)
      // this.$set(this.show, 'c', cShowData)
      this.$set(this.show, 'lastA', this.show.a)
      this.$set(this.show, 'lastB', this.show.b)
      this.$set(this.show, 'lastC', this.show.c)
      const aShowData = this.toFixed(this.show.a + getRandom(), 0)
      const bShowData = this.toFixed(this.show.b + getRandom(), 0)
      const cShowData = this.toFixed(this.show.c + getRandom(), 0)
      this.$set(this.show, 'a', aShowData)
      this.$set(this.show, 'b', bShowData)
      this.$set(this.show, 'c', cShowData)
      this.emitEvent()
    },
    toFixed(n, fixedNum = 2) {
      return ~~(Math.pow(10, fixedNum) * n) / Math.pow(10, fixedNum)
    },
    emitEvent() {
      this.$bus.$emit('updateOrderHour', {
        totalVal: this.show.a + this.show.b
      })
    }
  },
  destroyed() {
    // clearInterval(this.intervalIns)
    clearInterval(this.secondIntervalIns)
  }
}
</script>
<style scoped>
.box_b {
  position: relative;
  height: 300px;
  background-image: url(~@/assets/images/cont-bg7.png);
  background-repeat: no-repeat;
  background-size: 45%;
  background-position: 50% 0;
}
.box-item {
  position: absolute;
  width: 109px;
  height: 97px;
  background-image: url(~@/assets/images/cont-bg8.png);
  background-repeat: no-repeat;
}
.box-item1 {
  left: 15%;
}
.box-item2 {
  right: 15%;
  background-image: url(~@/assets/images/cont-bg9.png);
}
.box-item3 {
  left: 15%;
  top: 150px;
  background-image: url(~@/assets/images/cont-bg9.png);
}
.box-item4 {
  right: 15%;
  top: 150px;
  background-image: url(~@/assets/images/cont-bg9.png);
}
.val {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  height: 100px;
  padding-top: 20px;
  position: relative;
  display: flex;
}
.val.a,
.val.c {
  right: 90px;
  /* align-items: flex-end; */
}
.val.b,
.val.d {
  left: 95px;
}
.text {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  padding-bottom: 10px;
}
.unit {
  font-size: 22px;
  padding-left: 2px;
}
.val.a .unit,
.val.c .unit {
  padding-top: 8px;
}
</style>
